<template>
    <div>
        <!-- 头部 -->
        <!-- <div class="top_tab1">
            <div class="left1" @click="back()">
                <img  src="../assets/order_center/shangs.png">
            </div>
            <span>培训课程</span>
            <div class="right1">
            </div>
        </div>
        <div class="n"></div> -->
        <!-- 绿色背景 -->
        <div class="traban">
            <img :src="bankList.banner" :onerror="logo">
        </div>
        
        <div class="traintab" v-for="(item,index) in bankList.info" :key="index">
            <div class="trantitle">
                <div class="trabiao"></div>
                <div class="trati">{{item.type}}</div>
            </div>
            <div class="tratab1">
                <div class="tratabtop">
                    <div class="tratabtopimg">
                        <img src="../assets/product/kecheng.png" alt="">
                    </div>
                    <div class="tratabtopti">{{item.title}}</div>
                </div>
                <div class="traintili">
                   
                    <span>课程售价：￥{{item.price}}({{item.content}}) </span> <br>
                    <span> 赠送债权鸿包：{{item.redbag_price}}</span><br>
                    <span>{{item.cTime}}</span><br>
                    <span>{{item.address}}</span>
                </div> 
                <!-- <div class="traintili">1-获得任何区域城市去债（初级班）专业培训资格。</div> -->
                <div class="trainbtn">
                    <div class="trainlj" @click="goumai(item.id,item.price)">立即购买</div>
                </div>
            </div>
      </div> 


      <yd-popup v-model="show1" position="center" width="90%">
        <div class="boxs" style="background-color:#fff;">
             <div class="topk">去债课程</div>
             <div>
                 <input type="number" v-model="num" placeholder="输入购买次数(输入整数)">
             </div>
             <div class="qqued">
                 <div @click="isOk()">确定</div>
                 <div @click="show1 = false">取消</div>
             </div>
        </div>
    </yd-popup>
    <yd-keyboard v-model="show1s" :callback="done1" ref="keyboardDemo1"></yd-keyboard>

     <yd-popup v-model="show2" position="bottom">
         <div class="zhic">
             <div>现金支付</div>
             <div class="red">￥{{money*num}}</div>
         </div>
         <div class="pay" @click="pays()">立即支付</div>
     </yd-popup>
    </div> 
</template>
<script>
import Vue from 'vue';
import {Popup} from 'vue-ydui/dist/lib.rem/popup';
Vue.component(Popup.name, Popup);

export default {
  name: "train",
  data() {
    return {
      show: false,
      show1:false,
      show1s:false,
      isexplain:'',
      bankList:[],
      num:'',
      money:'',
      show2:false,
      safepassword:'',
      course_id:'',
      logo: 'this.src="' + require('../assets/order_center/lsx2.png') + '"'
    };
  },
   methods: {


    pays(){
      let self = this;
      let url = "/api/safepwd"; 
      self.orderList=[];
			self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
				if (res.code == 200) {   
                        if(res.data == 1){
                           self.show1s = true
                        }else{
                            self.$dialog.toast({
                            mes: '请设置安全密码！',
                            timeout: 1500
                            });
                            setTimeout(() => {
                                    self.$router.push("/ChangePassword");
                                }, 1000);
                            }
				}else{
                      alert(res.msg)
				} 
      })
    },
   done1(val) {
        console.log('输入的密码是：' + val);
        this.$dialog.loading.open('验证支付密码'); 
        if(val == this.safepassword){
           this.$dialog.loading.close();
           this.show1s = false
           this.isPay()
        }else{
          this.$refs.keyboardDemo1.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
          this.$dialog.loading.close();
        }
    },
 
    back: function() {
      this.$router.go(-1);
    },
    bank(){ 
      let self = this;
      let url = "/api/course/index"; 
      self.orderList=[];
			self.httpPost(url,{user_id:this.user_id,token:this.token,pagesize:999,p:1},function(res) {
				if (res.code == 200) {   
                self.bankList = res.data;
				}else{
                    self.$dialog.toast({
                            mes: res.msg,
                            timeout: 1000,
                            icon: 'error'
                        });
				} 
      })
    },
    //获取用户资料
    detail:function(){
      let self = this;
      let url = "/api/login/detail";
			self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
				if (res.code === 200) {
                    self.isexplain = res.data.isexplain;
                    self.safepassword =res.data.safepassword

				}else if(res.code === 288){
					self.$dialog.toast({mes:res.msg});
                setTimeout(function () {
                    self.$router.push("/login");
                }, 1500);
        }
      })
    },
    goumai(id,money){
        // if(this.isexplain != 1){
        //     this.$dialog.toast({mes:"您当前不是解债师！"});
        //     return
        // }
        this.course_id= id;
        this.money = money;
        this.show1 = true;
    },
    isOk(){
        let self = this;
        if(!(/(^[1-9]\d*$)/.test(this.num))){
            this.$dialog.toast({mes:"请输入正确购买数量"});
            return
        }  
        this.show1 = false;
        this.show2 = true; 
    },
    isPay(){
        let self = this;
        let url = "/api/course/buyCourse";
        self.httpPost(url,{user_id:this.user_id,token:this.token,course_id:this.course_id,count:this.num,pay_type:3},function(res) {
			if (res.code == 200) {   
                    setTimeout(() => {
                                window.location.href = 'http://hbh.dev.whbpkj.com/wx/pay/' + res.data;
                    }, 500);
            }else{
                alert(res.msg)
            }
      })
    }
  },
   created(){
    document.title="课程" 
    this.user_id = localStorage.getItem('myid');
    this.token = localStorage.getItem('mytoken'); 
    this.bank();
    this.detail();
   } 
};
</script>
<style>
.n {
  height: 0.9rem;
}
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}
.traban{
    /* height:3.20rem; */
}
.traintab{
    width:97%;
    margin:0 auto;
}
.trantitle{
    height:.3rem;
    line-height:.3rem;
    margin:.3rem 0 .2rem;
    display: flex;
}
.trabiao{
    width:.08rem;
    height:.3rem;
    background:#F08F39;
    margin-right:.2rem;
}
.trati{
    font-size:.3rem;
    color:#F08F39;
}
.tratab1{
    /* height:3rem; */
    padding:.2rem 5%;
    background:#fff;
    border-radius: .3rem;
}
.tratabtop{
    height:.3rem;
    line-height:.33rem;
    display: flex;
}
.tratabtopimg{
    margin-right:.2rem;
}
.tratabtopti{
    font-size:.28rem;
    vertical-align: middle;
}
.traintili{
    margin:.2rem 0;
    font-size: .25rem;
    color:#666;
}
.traintili span{
    /* color:#f00; */
}
.trainbtn{
    display: flex;
    justify-content: flex-end;
}
.trainbtn div{
    width:1.4rem;
    height:.6rem;
    text-align: center;
    line-height:.6rem;
    color:#fff;
    font-size:.25rem;
    border-radius: .1rem;
}
.trainlj{
    background:#f00;
    /* margin-right:.3rem; */
}
.trainedu{
    background:#F08F39;
}
.trainshow{
    height:5rem;
    background:#fff;
    padding-top:.6rem;
    text-align: center;
    border-radius: .4rem;
}
.trashti{
    font-size:.45rem;
    color:#333;
    margin-bottom:.4rem;
}
.trainshinput{
    width:80%;
    height:.88rem;
    border:1px solid #ddd;
    border-radius: .2rem;
    padding-left:5%;
    font-size:.3rem;
}
.trainshedu{
    text-align: left;
    padding:.4rem 10%;
    font-size:.3rem;
    border-bottom:.01rem solid #ddd;
    margin-bottom:.3rem;
    color:#333;
}
.trainshbtn{
    display: flex;
    justify-content: center;
}
.trainshbtn div{
    width:2.2rem;
    height:.8rem;
    text-align: center;
    line-height:.8rem;
    border-radius: .2rem;
    font-size:.3rem;
}
.trainshbtn>div:first-child{
    margin-right:.4rem;
}
.trainquer{
    background:#f00;
    color:#fff;
}
.trainqux{
    background:#ddd;
    color:#999;
}
.trainshbtn2{
    display: flex;
    justify-content: center;
}
.trainshbtn2 div{
    width:2.2rem;
    height:.8rem;
    text-align: center;
    line-height:.8rem;
    border-radius: .2rem;
    font-size:.3rem;
}
.trainshbtn2>div:first-child{
    margin-right:.4rem;
}
.trainshbtn2{
    margin-top:.8rem;
}
.traban img{
    width: 100%;
    height: 100%;
}
.boxs{
    border-radius: 10px;
    padding: .2rem;
}
.topk{
    text-align: center;
    font-weight: 500;
    font-size: .4rem;
    line-height: .5rem;
}
.boxs input{
    border: 1px solid #dfdfdf;
    width: 100%;
    padding-left: .2rem;
    height: .85rem;
    font-size: .28rem;
    color: #666;
    margin: .3rem 0;
}
.qqued{
    display: flex;
    justify-content: space-between;
}
.qqued div{
    width:45%;
    line-height: .85rem;
    border-radius: 5px;
    text-align: center;
}
.qqued div:nth-child(1){
    background: #f00;
    color: #fff;
    font-size: .3rem;
}
.qqued div:nth-child(2){
    font-size: .3rem;
    border: 1px solid #dfdfdd;
}
.red{
    color: #f00;
}
.zhic{
    display: flex;
    justify-content: space-between;
    padding:.5rem .25rem;
    font-size: .3rem;
}
.pay{
    background: #f00;
    font-size: .3rem;
    color: #fff;
    border-radius: 5px;
    line-height: .8rem;
    text-align: center;
    margin: .3rem .3rem;
}
</style>
